import { Drawer, Divider, Switch } from 'antd';
import { useState } from 'react';
import { connect } from 'react-redux';
import { FireOutlined, SettingOutlined, AppstoreOutlined } from '@ant-design/icons';
import { setThemeConfig } from '@/redux/modules/global/action';
import { updateCollapse } from '@/redux/modules/menu/action';

const ITEM_CLASS = ' flex justify-between my-2';
const Theme = (props: any) => {
	const [visible, setVisible] = useState<boolean>(false);
	const { setThemeConfig, updateCollapse } = props;
	const { isCollapse } = props.menu;
	const { themeConfig } = props.global;
	const { weakOrGray, breadcrumb, tabs, footer } = themeConfig;

	const setWeakOrGray = (checked: boolean, theme: string) => {
		if (checked) return setThemeConfig({ ...themeConfig, weakOrGray: theme });
		setThemeConfig({ ...themeConfig, weakOrGray: '' });
	};

	const onChange = (checked: boolean, keyName: string) => {
		return setThemeConfig({ ...themeConfig, [keyName]: !checked });
	};

	return (
		<>
			<i
				className='icon-class'
				onClick={() => {
					setVisible(true);
				}}>
				<AppstoreOutlined />
			</i>
			<Drawer
				title='布局设置'
				closable={false}
				onClose={() => {
					setVisible(false);
				}}
				open={visible}
				width={320}>
				{/* 全局主题 */}
				<Divider className='divider'>
					<FireOutlined />
					全局主题
				</Divider>

				<div className={ITEM_CLASS}>
					<span>灰色模式</span>
					<Switch
						checked={weakOrGray === 'gray'}
						onChange={(e) => {
							setWeakOrGray(e, 'gray');
						}}
					/>
				</div>
				<div className={ITEM_CLASS}>
					<span>色弱模式</span>
					<Switch
						checked={weakOrGray === 'weak'}
						onChange={(e) => {
							setWeakOrGray(e, 'weak');
						}}
					/>
				</div>
				<br />
				{/* 界面设置 */}
				<Divider className='divider'>
					<SettingOutlined />
					界面设置
				</Divider>
				<div className={ITEM_CLASS}>
					<span>折叠菜单</span>
					<Switch
						checked={isCollapse}
						onChange={(e) => {
							updateCollapse(e);
						}}
					/>
				</div>
				<div className={ITEM_CLASS}>
					<span>面包屑导航</span>
					<Switch
						checked={!breadcrumb}
						onChange={(e) => {
							onChange(e, 'breadcrumb');
						}}
					/>
				</div>
				<div className={ITEM_CLASS}>
					<span>页脚</span>
					<Switch
						checked={!footer}
						onChange={(e) => {
							onChange(e, 'footer');
						}}
					/>
				</div>
			</Drawer>
		</>
	);
};

const mapStateToProps = (state: any) => state;
const mapDispatchToProps = { setThemeConfig, updateCollapse };
export default connect(mapStateToProps, mapDispatchToProps)(Theme);
